<template>
  <div class="box mb-3 shadow-sm border rounded bg-white osahan-post">
    <div
      class="p-3 d-flex align-items-center border-bottom osahan-post-header"
    >
      <div class="dropdown-list-image mr-3 header">
        <img
          class="rounded-circle header"
          :src="Iteminfo.user_header"
          alt=""
        />
        <!-- 小绿点 -->
        <div class="Headermenu">
          <div>
            <a href="javascript:void(0);" @click="addBuddy(Iteminfo.user_id)"
            >添加好友</a
            >
          </div>
          <div>
            <a
              href="javascript:void(0);"
              @click="gotHomepage(Iteminfo.user_id)"
            >查看主页
            </a>
          </div>
          <div></div>
        </div>
      </div>
      <div class="font-weight-bold">
        <div class="text-truncate">{{ Iteminfo.user_name }}</div>
        <div class="small text-gray-500">
          {{ Iteminfo.personalized_signature }}
        </div>
      </div>
      <span class="ml-auto small">
        <div class="delMood" v-if="Iteminfo.user_id === $store.state.userInfo.userid" >
          <i class="el-icon-more"> </i>
          <div class="showBlock">
            <div @click="delMood(Iteminfo.essay_id,index)">删除</div>
          </div>
        </div>
        <div>{{ $moment(Iteminfo.create_time).format("lll") }}</div>
        <div style="color: #007bff !important">
          {{ Iteminfo.user_location }}
        </div>
      </span>
    </div>
    <div class="p-3 border-bottom osahan-post-body">
      <p v-if="Iteminfo.type == 1">
        {{ Iteminfo.user_essay }}
      </p>
      <p v-if="Iteminfo.type == '6' || Iteminfo.type == '7'">
        {{ Iteminfo.user_essay.split("&BakerMood&")[1] }}
        <a href="#">{{ Iteminfo.user_essay.split("&BakerMood&")[0] }}</a>
      </p>
      <div v-if="Iteminfo.type == '5'">
        <p>{{ Iteminfo.user_essay.content }}</p>
        <div
          v-for="(value, key, index) in Iteminfo.user_essay.option"
          :key="index"
          class="voteBody"
          @click.once="
            isClick &&
              voteIsClick(Iteminfo.user_essay, key, Iteminfo.essay_id)
          "
        >
          <div class="content">{{ key }}</div>
          <div class="Masking" ref="masking"></div>
          <div class="VoteNum" ref="voteNum">{{ value }}票</div>
          <div class="progress">
            <progress-bar
              :value="value"
              :max="sumOpption(Iteminfo.user_essay.option)"
            ></progress-bar>
          </div>
        </div>
      </div>
      <div v-if="Iteminfo.essay_img.length != 0" id="showImgStyle1">
        <img
          v-for="(imgItem, index) in Iteminfo.essay_img"
          :key="index"
          :src="imgItem"
          alt="图片加载出错！ "
        />
      </div>
    </div>
    <div class="p-3 border-bottom osahan-post-footer">
      <a
        class="mr-3 text-secondary"
        @click.once="likeClick(Iteminfo.essay_id)"
      >
        <i class="iconfont icon-aixin text-danger"></i>
        {{ Iteminfo.likeNum }}
      </a>
      <a class="mr-3 text-secondary" @click="discussClick(Iteminfo.essay_id)">
        <svg
          style="height: 16px; width: 16px"
          class="icon"
          aria-hidden="true"
        >
          <use xlink:href="#icon-pinglun"></use>
        </svg>
        {{ Iteminfo.discussNum }}</a
      >
      <!-- <a class="mr-3 text-secondary"
      ><svg
         style="height: 16px; width: 16px"
         class="icon"
         aria-hidden="true"
       >
         <use xlink:href="#icon-shoucang"></use>
       </svg>
        {{ Iteminfo.collectNum }}</a
      > -->
    </div>
    <div>
      <div v-if="isShowDiscuss">
        <div
          class="p-3 d-flex align-items-top border-bottom osahan-post-comment"
          v-for="(item, index) in discussArr"
          :key="index"
        >
          <div class="dropdown-list-image mr-3">
            <img class="rounded-circle" :src="item.userHeader" alt="" />
            <div class="status-indicator bg-success"></div>
          </div>
          <div class="font-weight-bold" id="discussStyle">
            <div class="text-truncate" style="width: 100%">
              {{ item.user_name
              }}<span class="float-right small">{{
                $moment(Iteminfo.create_time).format("lll")
              }}</span>
            </div>
            <div class="small text-gray-500">
              {{ item.content }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="p-3" v-if="isShowDiscuss">
      <textarea
        placeholder="发表评论..."
        class="form-control border-0 p-0 shadow-none"
        rows="1"
        v-model="discussText"
      ></textarea>
      <el-button
        type="primary"
        size="mini"
        style="width: 100%; margin: 5px 0"
        @click="sendDiscuss(Iteminfo.essay_id)"
      >发送</el-button
      >
    </div>
  </div>
</template>

<script>
import ProgressBar from "../common/progressBar.vue";

export default {
  data() {
    return {
      sendDiscussStore: this.newStore(), // 发表评论
      getDiscussStore: this.newStore(), // 获取评论
      likeStore: this.newStore(), // 获取评论
      addBuddyStore: this.newStore(), // 获取评论
      voteStore: this.newStore(), // 提交投票
      delStore: this.newStore(),
      isShowDiscuss: false,
      isImg: false,
      discussText: "",
      discussArr: [],
      isClick: true,
    };
  },
  components: { ProgressBar },
  props: ["Iteminfo", 'index'],
  methods: {
    sumOpption(obj) {
      let max = 0;
      Object.keys(obj).forEach((key) => {
        max += obj[key];
      });
      return max;
    },
    // 添加好友
    addBuddy(value) {
      if (this.$store.state.userInfo.userid === value) {
        this.$message.warning("不能添加自己为好友哦！");
      } else {
        this.spost(this.addBuddyStore, "/addBuddy", {
          userId: this.$store.state.userInfo.userid,
          friendId: value,
        }).then((res) => {
          this.$message.success(res.d.message);
        });
      }
    },
    // 访问主页
    gotHomepage(value) {
      this.$router.push({ path: "/otherhome", query: { id: value } });
    },
    // 获取评论
    getDiscuss(id) {
      this.spost(this.getDiscussStore, "/Mood/getComment", {
        essayId: id,
      }).then((res) => {
        this.discussArr = res.d.commentList;
      });
    },
    // 点击评论按钮事件
    discussClick(id) {
      this.isShowDiscuss = !this.isShowDiscuss;
      if (this.isShowDiscuss === true) {
        this.getDiscuss(id);
      } else {
        this.isShowDiscuss = false;
      }
    },

    // 发送表评论
    sendDiscuss(itemId) {
      if (this.discussText !== "") {
        this.spost(this.sendDiscussStore, "/Mood/addComment", {
          essayId: itemId,
          userId: this.$store.state.userInfo.userid,
          content: this.discussText,
        }).then((res) => {
          this.discussArr = res.d.commentList;
          this.$message.success("发表成功！");
          this.discussText = "";
        });
      } else {
        this.$message.warning("请填写评论信息");
      }
    },
    voteIsClick(value, key, id) {
      this.isClick = false;
      value.option[key] += 1;
      this.spost(this.voteStore, "/Mood/voting", {
        userEssay: JSON.stringify(value),
        essay_id: id,
      }).then(() => {
        this.$message.success("投票成功！");
      });
      this.$refs.masking.forEach((item) => {
        item.style.animationPlayState = "running";
      });
      this.$refs.voteNum.forEach((item) => {
        item.style.display = "block";
      });
    },
    // 点赞
    likeClick(id) {
      this.spost(this.likeStore, "/Mood/likeMood", { essay_id: id }).then(
        (res) => {
          this.$message.success(res.d.msg);
          this.$emit("likeNumChange", res.d.likeNum[0].likeNum);
        },
      );
    },
    // 删除
    delMood(id, index) {
      this.$confirm("此操作将永久删除该动态, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        lockScroll: false,
      })
        .then(() => {
          this.spost(this.delStore, "/delProfileMood", {
            essay_id: id,
          }).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.$emit('del', index);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped lang="scss">
#showImgStyle1 > img:nth-last-child(1):first-child {
  width: calc(100% /3);
  max-height: auto;
}
#showImgStyle1 > img:nth-last-child(2):first-child {
  vertical-align: bottom;
  width: calc(100% / 3);
  padding: 5px;
}
#showImgStyle1 > img:nth-last-child(2):first-child ~ img {
  width: calc(100% / 3);
  vertical-align: bottom;
  padding: 5px;
}
#showImgStyle1 > img:nth-last-child(3):first-child {
  width: calc(100% / 3 - 1%);
  margin-right: 2%;
}
#showImgStyle1 > img:nth-last-child(3):first-child ~ img:nth-last-child(2) {
  width: calc(100% / 3 - 1%);
}
#showImgStyle1 > img:nth-last-child(3):first-child ~ img:nth-last-child(1) {
  width: 100%;
  margin-top: 1%;
}
.customClass {
  min-height: 600px;
}

#discussStyle {
  width: 100%;
}

.header {
  position: relative;
  .Headermenu {
    display: none;
    width: 180%;
    text-align: center;
    position: absolute;
    color: #007bff;
    background: white;
    border-radius: 5%;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
      rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
      rgba(0, 0, 0, 0.07) 0px 16px 16px;
    div {
      margin: 5px;
    }
  }
}
.header:hover {
  .Headermenu {
    display: block;
  }
}
.voteBody {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 0.5rem;
  .content {
    width: 35%;
    height: 2rem;
    position: absolute;
    line-height: 2rem;
    z-index: 100;
    padding-left: 0.5rem;
    color: #42444d;
    border-radius: 0.5rem;
  }
  .progress {
    border-radius: 0.5rem;
    width: 75%;
    height: 1.5rem;
  }
  .Masking {
    border-radius: 0.5rem;
    position: absolute;
    width: 100%;
    height: 1.5rem;
    background: #39aea9;
    animation-name: example;
    animation-duration: 0.5s;
    animation-play-state: paused;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }
  .Masking:hover {
    background: #44c7c0;
  }
  .VoteNum {
    z-index: 100;
    position: absolute;
    margin-left: 80%;
    display: none;
  }
  @keyframes example {
    0% {
      width: 75%;
    }
    100% {
      width: 0%;
      opacity: 0;
    }
  }
}
.delMood {
  text-align: right;
  position: relative;
  .showBlock {
    display: none;
    right: 0;
    height: auto;
    width: 4rem;
    background: white;
    position: absolute;
    border-radius: 5%;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
      rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
      rgba(0, 0, 0, 0.07) 0px 16px 16px;
    div {
      color: #007bff;
      width: 100%;
      text-align: center;
      padding: 0.25rem;
    }
    div:hover {
      cursor: pointer;
      color: #0774e9;
    }
  }
}
.delMood:hover{
  .showBlock{
    display: block;
  }
}
::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 5px;
            scrollbar-arrow-color: red;
        }

::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
        border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.2);
            scrollbar-arrow-color: red;
        }

::-webkit-scrollbar-track { /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
            border-radius: 0;
            background: rgba(0,0,0,0);
        }
</style>
